<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>代理商管理</el-breadcrumb-item>
                <el-breadcrumb-item>代理商信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>基本信息</span>
                    </div>
                    <div>
                        <el-form-item label="代理商编号" prop="id">
                         <el-input v-model="ruleForm.id" class="pr15" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="代理商名称" prop="name">
                         <el-input v-model="ruleForm.name" class="pr15" :disabled="editAction"></el-input>
                        </el-form-item>
                        <el-form-item label="登陆用户名" prop="code">
                         <el-input v-model="ruleForm.code" class="pr15" :disabled="editAction"></el-input>
                        </el-form-item>
                        <el-form-item label="登陆密码" prop="password">
                         <el-input type="password" v-model="ruleForm.password" class="pr15" :disabled="editAction" placeholder="请输入登陆密码"></el-input>
                        </el-form-item>
                        <el-form-item label="确认登陆密码" prop="checkPwd">
                         <el-input type="password" v-model="ruleForm.checkPwd" :disabled="editAction" class="pr15" placeholder="请再次输入登陆密码"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人手机号" prop="agentMobile">
                         <el-input v-model="ruleForm.agentMobile" class="pr15" :disabled="editAction"></el-input>
                        </el-form-item>
                        <el-form-item label="省市区" prop="selectedOptions">
                          <el-cascader
                            size="large"
                            :options="options"
                            v-model="ruleForm.selectedOptions"
                            @change="handleChange"
                            :disabled="editAction"
                          >
                          </el-cascader>
                        </el-form-item>
                        <el-form-item label="入账账户名" prop="incomeName">
                         <el-input v-model="ruleForm.incomeName" class="pr15" :disabled="editAction"></el-input>
                        </el-form-item>
                        <el-form-item label="开户银行名" prop="bankName">
                         <el-input v-model="ruleForm.bankName" class="pr15" :disabled="editAction"></el-input>
                        </el-form-item>
                        <el-form-item label="开户账户" prop="bankNo">
                         <el-input v-model="ruleForm.bankNo" class="pr15" :disabled="editAction"></el-input>
                        </el-form-item>
                        <el-form-item label="现金余额" prop="cash">
                         <el-input v-model="ruleForm.cash" class="pr15" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="待结算" prop="settle">
                         <el-input v-model="ruleForm.settle" class="pr15" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="在途资金" prop="transit">
                         <el-input v-model="ruleForm.transit" class="pr15" disabled></el-input>
                        </el-form-item>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>分润信息</span>
                    </div>
                    <div>
                      <el-form-item label="线上分润比例(%)" class="inputNum" prop="agentOnlinepPercent">
                        <el-input-number v-model="ruleForm.agentOnlinepPercent" :disabled="editAction" controls-position="right" :precision="2" :step="1" >
                        </el-input-number>
                      </el-form-item>
                      <el-form-item label="投币分润比例(%)" class="inputNum" prop="agentCoinsPercent">
                        <el-input-number v-model="ruleForm.agentCoinsPercent" :disabled="editAction" controls-position="right" :precision="2" :step="1" >
                        </el-input-number>
                      </el-form-item>
                    </div>
                </el-card>
               <div class="btn-ruleForm" v-if="$route.query.action !== 'query'">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </div>
    </div>
</template>

<script>
    import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
    import BW from '../../../assets/scripts/common/bwCommon'

    export default {
        name: 'baseform',
        data() {
          var validatePass = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入正确的新密码!'));
              } else {
                if (this.ruleForm.checkPwd !== '') {
                  this.$refs.ruleForm.validateField('checkPwd');
                }
                callback();
              }
          };
          var validatePwd = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入正确的密码!'));
              } else if (value !== this.ruleForm.password) {
                callback(new Error('两次密码输入不一致!'));
              } else {
                callback();
              }
          };
          return {
            ruleForm: {
                agentName: '',
                code:'',
                password:'',
                checkPwd:'',
                agentMobile: '',
                selectedOptions: [],
                incomeName: '',
                bankName:'',
                bankNo:'',
                province:'',
                city:'',
                district: '',
                agentOnlinepPercent:10,
                agentCoinsPercent:10
            },
            editAction:false, // 查看市禁止编辑
            rules: {
              agentName: [
                { required: true, message: '请输入名称', trigger: 'blur' },
              ],
              code: [
                { required: true, message: '请输入登陆名', trigger: 'blur' }
              ],
              password: [
                { required: true,validator: validatePass, trigger: 'blur' }
              ],
              checkPwd: [
                { required: true,validator: validatePwd, trigger: 'blur' }
              ],
              agentMobile: [
                { required: true, message: '请输入联系人手机', trigger: 'blur' }
              ],
              selectedOptions: [
                { required: true, message: '请选择省市区', trigger: 'change' }
              ],
              incomeName: [
                { required: true, message: '入账账户名', trigger: 'blur' }
              ],
              bankName: [
                { required: true, message: '请填写开户银行名', trigger: 'blur' }
              ],
              bankNo: [
                { required: true, message: '请填写开户账户', trigger: 'blur' }
              ],

            },
            options: regionData,
          }
        },
        created() {
          if(this.$route.query.action === 'query'){
            this.editAction = true;
          }
        },
        mounted() {
          if(this.$route.query.action === 'edit' || this.$route.query.action === 'query'){
            this.getDetailData(this.$route.query.id);
          }

        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
              let param = {};
              if (valid) {
                param = {...this.ruleForm};
                if(param.agentCoinsPercent){
                  param.agentCoinsPercent = param.agentCoinsPercent*100;
                }
                if(param.agentOnlinepPercent){
                  param.agentOnlinepPercent = param.agentOnlinepPercent*100;
                }
                let res = await this.request('agentAdd', param) // 新增交易
                this.$router.push('/agentList');
                BW.Toast('新增成功!');
              } else {
                console.log('新增失败!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          async getDetailData(id) {   // 获取数据
            const param = {
              agentId:id
            }
            let res = await this.request('agentDetail', param, 'get');
            this.ruleForm = res.data;
            if(res.data.cash){
                this.ruleForm.cash = res.data.cash.amount;
            }

            if(res.data.settle){
                this.ruleForm.settle = res.data.settle.amount;
            }
            if(res.data.transit){
                this.ruleForm.transit = res.data.transit.amount;
            }
            if(this.ruleForm.agentCoinsPercent){
              this.ruleForm.agentCoinsPercent = this.ruleForm.agentCoinsPercent/100;
            }
            if(this.ruleForm.agentOnlinepPercent){
              this.ruleForm.agentOnlinepPercent = this.ruleForm.agentOnlinepPercent/100;
            }

            if(res.data.province && res.data.city && res.data.district){
              this.ruleForm.selectedOptions = [TextToCode[res.data.province].code, TextToCode[res.data.province][res.data.city].code, TextToCode[res.data.province][res.data.city][res.data.district].code];
            }
          },
          handleChange (value) {
            this.ruleForm.province = CodeToText[value[0]];
            this.ruleForm.city = CodeToText[value[1]];
            this.ruleForm.district = CodeToText[value[2]];
          }
        }
    }
</script>
<style scoped>
    .btn-ruleForm {
        text-align: center;
    }

    .pr15{
      padding-right: 15px;
    }

    .inputNum{
      width: 32%;
    }
</style>
